/*单行文本溢出显示省略号*/
.ellipsis{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/*清除浮动*/
.clear{
  zoom:1;
  &::after{
    clear:both;
    content:'';
    display:block;
    height:0;
    visibility:hidden;
  }
}
/*居中*/
.center {
  display:flex;
  align-items:center;
  justify-content:center;
}
/*多行文本溢出显示省略号*/
.multi-ellip(@line:2){
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:@line;
  -webkit-box-orient:vertical;
}
/*单行两端对齐*/
.justify{
  text-align:justify;
  text-align-last:justify;
  &::after{
    display:inline-block;
    content:"";
    overflow:hidden;
    width:100%;
    height:0;
  }
}
/*自动换行*/
.new-line{
  white-space:normal;
  word-break:break-all;
  word-wrap:break-word;
  hyphens:auto;
}
/*垂直书写文本*/
.verticle-text{
  writing-mode:vertical-rl;
  writing-mode:tb-rl;
}
/*遮罩层*/
.mark-layer{
  display:block;
  position:fixed;
  overflow:hidden;
  pointer-events:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:10000;
  background-color:rgba(55,55,55,.6);
}
/*混合图片*/
.mix-pic{
  // background:url(@pic1),url(@pic2);
  background-size:cover;
  background-blend-mode:lighten;
  // mix-blend-mode:lighten;
}
/*block items*/
.block-container{
  list-style:none;
  margin:0;
  overflow-x:auto;
  padding:2px 0;
  white-space:nowrap;
  >.block-item{
    cursor:pointer;
    display:inline-block;
    text-align:text-justify;
    margin-left:8px;
    margin-top:0;
    max-width:210px;
    min-width:150px;
    width:63%;
  }
}
/*callout*/
@info:#428bca;
@success:#5cb85c;
@warning:#f0ad4e;
@danger:#d9534f;
.callout {
  display: block;
  padding: 5px 10px;
  margin: 5px 0;
  color: #777;
  border-left-width: 4px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.03);
  position: relative;
  border-left-color: @info;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 6px solid transparent;
    border-left: 6px solid @info;
  }
  &.info {
    border-left-color: @info;
    &::after {
      border-left-color: @info;
    }
  }
  &.success {
    border-left-color: @success;
    &::after {
      border-left-color: @success;
    }
  }
  &.warning {
    border-left-color: @warning;
    &::after {
      border-left-color: @warning;
    }
  }
  &.danger {
    border-left-color: @danger;
    &::after {
      border-left-color: @danger;
    }
  }
}

